<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>melist多级联动下拉菜单可中文检索</title>
	<link rel="stylesheet" href="css/styleme.css">
	<link rel="stylesheet" href="css/melist.css" id="mecss">
	<script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js" type="text/javascript"></script>
	<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
	<!--拼音检索-->
	<script src="js/jQuery.Hz2Py-min.js"></script>
	<script src="js/melist.js"></script>


</head>
<body>
<br><br>
	<div class="forms wrapper">
		<div class="formsTitle"><h2>多级联动及自动执行示例</h2></div>
		<fieldset>
			ol > li 里就是默认的表单，设置好name值及是单选radio或多选checkbox<br>
			注意：json数据里的name值是可以改变表单name值的（方便多级菜单使用）<br>
			默认表单只为拉取结构用途，添加初始呈现表单，请使用oladd('01','name','Hi,默认标签','如果有下级json地址')<br>
			多级连动菜单需要class="linkage" linkage="url|all" link="初始Ajax地址" type="checkbox"<br>
			<<非服务器环境，谷歌浏览器快捷方式需 --allow-file-access-from-files>>
		</fieldset>
		<hr>
		<dl>
			<dt><i>*</i> 逐级加载-多级联动菜单：</dt>
			<dd>
				<!-- 多级连动型 class="linkage" linkage="url" type="checkbox" link="初始Ajax地址" -->
				<span class="textroot linkage" linkage="url">
					<ol><li><input name="zb" type="checkbox" class="" /></li></ol>
					<div class="text">
						<input type="text" placeholder="请选项目">
						<ul class="soso" id="linkageUrl" data-link="json/01danwei.js"></ul>
						<div class="more">更多</div>
					</div>
				</span>
<br>
				<p style="color: #AAA">linkage="url" 逐级加载分类json数据，适合列表数据庞大分次读库的方式<br>初始菜单需要$("linkageUrl").oladd()</p>
			</dd>
		</dl>
		<hr>
		<dl>
			<dt><i>*</i> 全部加载-多级联动菜单：</dt>
			<dd>
				<!-- 多级连动型 class="linkage" linkage="all" type="checkbox" link="初始Ajax地址" -->
				<span class="textroot linkage" linkage="all">
					<ol><li><input name="zb" type="checkbox" class="" /></li></ol>
					<div class="text">
						<input type="text" placeholder="请选项目">
						<ul class="soso" id="linkageAll" data-link="json/all.js"></ul>
						<div class="more">更多</div>
					</div>
				</span>

				<p style="color: #AAA">linkage="all" 一次加载全部分类json数据<br>json数据里可设置"show":"true"初始菜单</p>
			</dd>
		</dl>
		<hr>
		<dl>
			<dt><i>*</i> 直接赋值-多级联动菜单：</dt>
			<dd>
				<!-- 多级连动型 class="linkage" linkage="all" type="checkbox" link="初始Ajax地址" -->
				<span class="textroot linkage" linkage="all">
					<ol><li><input name="zb" type="checkbox" class="" /></li></ol>
					<div class="text">
						<input type="text" placeholder="请选项目">
						<ul class="soso" id="linkageAll2"></ul>
						<div class="more">更多</div>
					</div>
				</span>

				<p style="color: #AAA">针对页面已经有json数据树的直接赋值<br>json数据里可设置"show":"true"初始菜单</p>
			</dd>
		</dl>
		<hr>

		<dl>
			<dt>单选：</dt>
			<dd>
				<!-- 单一型(data-link地址获取json数据) type="radio" link="初始Ajax地址" -->
				<span class="textroot">
					<ol><li><input name="lx" type="radio" class="" /></li></ol>
					<div class="text">
						<input type="text">
						<ul class="soso" id="leixing" data-link="json/02bangong.js"></ul>
						<div class="more">更多</div>
					</div>
				</span>
			</dd>
		</dl>
		<br>
		<dl>
			<dt>多选：</dt>
			<dd>
				<!-- 多选型 type="checkbox" link="初始Ajax地址" -->
				<span class="textroot">
					<ol><li><input name="cs" type="checkbox" class="validate[required]" /></li></ol>
					<div class="text">
						<input type="text">
						<ul class="soso" id="chaosong" data-link="json/03ren.js"></ul>
						<div class="more">更多</div>
					</div>
				</span>
			</dd>
		</dl>
		<hr>
		<dl>
			<dt>切换样式：</dt>
			<dd id="cssBtn">
				<button>melist2.css</button><button>melist.css</button>
			</dd>
		</dl>

	</div>



<script type="text/javascript">
	// ----可搜索式选项列表----
	//初始化
	melist();
	//批量处理检索菜单，"soso"上要写data-link获取地址（soso需要有id=""）
	linkageall();


	//监听初始表单结果
	$('#linkageAll').bind('initial',function (ev,val) {
		console.log('初始结果：'+val.id, val.title)
	})
	//监听选择事件
	$('#linkageUrl').bind('select',function (ev,val) {
		console.log(val.id, val.title)
	})
	//监听最终选择事件
	$('#linkageUrl').bind('selected',function (ev,val) {
		console.log('------最终结果：'+val.id, val.title)
	})
	//删除已选项事件
	$('#linkageUrl').bind('clean',function (ev,val) {
		console.log('------删除一项，留存的是：'+val.id, val.title)
	})
	//删除全部已选项事件
	$('#linkageUrl').bind('cleanest',function (ev,val) {
		console.log('------已清空')
	})

	//逐级加载分类的初始项
	$('#linkageUrl').oladd('01','name','初始分类','json/02bangong.js');

	$('#cssBtn').on('click','button',function(event) {
		$('#mecss').attr('href','css/'+$(this).html());
	});


	//页面已有数据的直接赋值
	var jsondata = {
		infor: [
			{
				id: "01", name: "danwei", title: "赤峰市森林公安局",
				"link": [
					{
						id: "01", name: "bangong", title: "办公室",
						"link": [
							{ id: "01", name: "ren", title: "张局" },
							{ id: "02", name: "ren", title: "李处" }
						]
					},
					{
						id: "02", name: "bangong", title: "警卫处",
						"link": [
							{ id: "01", name: "ren", title: "第二个" },
							{ id: "02", name: "ren", title: "李处" }
						]
					}
				]
			},
			{
				id: "02", name: "danwei", title: "自治区森林公安局", "show": "true",
				"link": [
					{
						id: "01", name: "bangong", title: "办公室2"
					}
				]
			}
		]
	}
	window.setLinkageAll($("#linkageAll2"),jsondata.infor);
	
</script>

</body>
</html>
